<template>
  <main>
    <el-form :inline="true" :model="queryData" >
      <el-form-item label="身份" v-if="userStatus!==1||userStatus!==2">
        <el-select v-model="queryData.u_status" placeholder="选择身份"  style="width:120px">
          <el-option
            v-for="item in roleOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="姓名">
        <el-input v-model="queryData.u_name" placeholder="请输入姓名" style="width:120px"></el-input>
      </el-form-item>
      <el-form-item label="账号">
        <el-input v-model="queryData.u_account" placeholder="请输入账号" style="width:150px"></el-input>
      </el-form-item>
      <el-form-item label="联系电话">
        <el-input v-model="queryData.u_tel" placeholder="请输入联系电话" style="width:150px"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" class="greenButton" @click="onQuery">查询</el-button>
        <el-button type="primary" class="greenButton" @click="reset">重置</el-button>
      </el-form-item>
      <el-form-item style="float:right;">
          <el-button type="primary" class="greenButton" @click="dleMany()">批量删除</el-button>
      </el-form-item>
    </el-form>

    <el-table
    ref="multipleTable"
      @selection-change="handleSelectionChange"
      :data="memberList.slice((currentPage-1)*pagesize,currentPage*pagesize)"
      border
      style="width: 100%;border:1px solid #00BDAC;"
      height="78%"
      :header-cell-style="{borderRight:'none',backgroundColor:'#00BDAC',color:'#FFFFFF'}"
    >
      <el-table-column
      type="selection"
      width="55">
      </el-table-column>
      <el-table-column align="center" type="index" :index="table_index" width="50px" label="序号"></el-table-column>
      <el-table-column align="center" prop="u_name" width="100px" label="姓名"></el-table-column>
      <el-table-column align="center" prop="u_tel" width="120px" label="联系电话"></el-table-column>
      <el-table-column align="center" prop="u_address" label="居住地址"></el-table-column>
      <el-table-column align="center"  width="100px" label="身份权限">
        <template slot-scope="scope">
          <span v-if="scope.row.u_status == 0">超级管理员</span>
          <span v-if="scope.row.u_status == 1">巡检人员</span>
          <span v-if="scope.row.u_status == 2">维修人员</span>
          <span v-if="scope.row.u_status == 3">管理员</span>
          <span v-if="scope.row.u_status == 4">设备管理员</span>
          <span v-if="scope.row.u_status == 5">巡检管理员</span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="u_post" label="目前岗位"></el-table-column>
      <el-table-column align="center" prop="u_account" width="120px" label="系统账号"></el-table-column>
      <el-table-column align="center" label="管理" width="200px">
        <template slot-scope="scope">
          <el-button size="mini" class="greenButton" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button
            size="mini"
            v-show="scope.row.u_id != shick"
            class="pinkButton"
            @click="handleDelete(scope.$index, scope.row)"
          >删除</el-button>
          <el-button
            size="mini"
            v-show="scope.row.u_id == shick"
            type="warning"
          >本人账号</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="footer">
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-size="pagesize"
        layout="total,prev, pager, next, jumper"
        :total="memberList.length"
        prev-text="上一页"
        next-text="下一页"
      ></el-pagination>
    </div>
    <el-dialog
      destroy-on-close
      :visible.sync="isShowEdit"
      :show-close="false"
      class="edit-dialog"
      width="1100px"
    >
      <div slot="title" class="edit-dialog-title">编辑管理员信息</div>
      <el-form :model="memberInfo" class="edit-form" label-width="100px" label-position="left">
        <el-form-item label="身份权限：">
          <el-select class="add-input" v-model="memberInfo.u_status" placeholder="选择身份">
            <el-option
              v-for="item in roleOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="姓　　名：">
          <el-input class="add-input" v-model="memberInfo.u_name" placeholder></el-input>
        </el-form-item>
         <el-form-item label="系统账号：">
          <el-input class="add-input" v-model="memberInfo.u_account" placeholder></el-input>
        </el-form-item>
        <el-form-item label="年　　龄：">
          <el-input class="add-input" v-model="memberInfo.u_age" placeholder></el-input>
        </el-form-item>
        <el-form-item label="居住地址：">
          <el-input class="add-input" v-model="memberInfo.u_address" placeholder></el-input>
        </el-form-item>
        <el-form-item label="目前岗位：">
          <el-input class="add-input" v-model="memberInfo.u_post" placeholder></el-input>
        </el-form-item>
        <el-form-item label="联系电话：">
          <el-input class="add-input" v-model="memberInfo.u_tel" placeholder></el-input>
        </el-form-item>
        <el-form-item label="设置密码：">
          <el-input class="add-input" v-model="memberInfo.u_pass" placeholder></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer">
        <el-button @click="cancel" class="pinkButton" type="primary">取消</el-button>
        <el-button @click="submit" class="greenButton" type="primary">提交</el-button>
      </div>
    </el-dialog>
  </main>
</template>

<script>
export default {
  data: function() {
    return {
      currentPage:1,
      pagesize:10,
      shick:localStorage.getItem('uid'),
      memberList: [],
      isShowEdit: false,
      memberInfo: {
        u_status: "",
        u_name: "",
        u_tel: "",
        u_age: "",
        u_address: "",
        u_post: "",
        u_account: "",
        u_pass: ""
      },
      queryData: {
        u_status: "",
        u_name: '',
        u_account:'',
        u_tel:''
      },
      listmid:[],
      roleOptions: [],
      userStatus:"",
      multipleSelection:[],
    };
  },
  created(){
    this.userStatus = localStorage.getItem('userSatus')
    let userStatus = localStorage.getItem('userSatus')
    if(userStatus==0||userStatus==3){
      this.roleOptions = [
        {
          value: 1,
          label: "巡检人员"
        },
        {
          value: 2,
          label: "维修人员"
        }
      ]
    }else if(userStatus==4){
      this.queryData.u_status = 2
      this.roleOptions = [
        {
          value: 2,
          label: "维修人员"
        }
      ]
    }else if(userStatus==5){
      this.queryData.u_status = 1
      this.roleOptions = [
        {
          value: 1,
          label: "巡检人员"
        },
      ]
    }

  },
  mounted(){
    this.huoqu();
  },
  methods: {
    reset(){
      if(this.userStatus==4){
        console.log('4')
        this.queryData= {
          u_status: 2,
          u_name: '',
          u_account:'',
          u_tel:''
        }
        this.onQuery()
        return
      }
      if(this.userStatus==5){
        console.log('4')
        this.queryData= {
          u_status: 1,
          u_name: '',
          u_account:'',
          u_tel:''
        }
        this.onQuery()
        return
      }
      this.queryData= {
        u_status: "",
        u_name: '',
        u_account:'',
        u_tel:''
      }
      this.onQuery()
    },
    dleMany(){
      console.log(this.multipleSelection)
      if(this.multipleSelection.length==0){
        return this.$message.error('请选择您要删除的信息')
      }
      const arr = []
      this.multipleSelection.forEach((item)=>{
          arr.push(item.u_id)
      })
      console.log(arr.join(','))
      this.$confirm('此操作将永久删除该信息, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            let parme = {
                id:arr.join(',')
              }
              console.log(parme)
              this.ajaxCommon.ajax({
                    url: 'pilianguserdelete',
                    data:parme,
                    success: (res) => {
                      console.log(res)
                      if(res.code == 200){
                        this.$message({
                            message: '删除成功',
                            type: 'success',
                            duration:'2000'
                          });
                           this.huoqu();
                      }else{
                        this.$message({
                            message: res.status,
                            type: 'error',
                            duration:'2000'
                          });

                      }
                     
                    }
                });
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });          
          });
    },
    handleSelectionChange(selection){
        console.log(selection)
        this.multipleSelection = selection
    },
    table_index(index){
        return (this.currentPage -1) * this.pagesize + index + 1
    },  
    huoqu(){
      if(localStorage.getItem('userSatus')==4||localStorage.getItem('userSatus')==5){
        let parem = {
          status:localStorage.getItem('userSatus')
        }
        if(localStorage.getItem('userSatus')==4){
          parem.status = 2
        }
        if(localStorage.getItem('userSatus')==5){
          parem.status = 1
        }

        console.log(parem)
        this.ajaxCommon.ajax({
            url: 'ADMINuserlist',
            methods:'get',
            data: parem,
            success: (res)=>{
                  console.log(res)
                  this.listmid = res;
                  this.memberList = res;
            }
          });
      }else{
        this.ajaxCommon.ajax({
            url: 'ADMINuserlist',
            success: (res)=>{
                  console.log(res)
                  this.listmid = res;
                  this.memberList = res;
            }
          });

      }
      
    },
    //下一页
    handleCurrentChange(val){
      this.currentPage = val;
    },
    handleEdit(index, row) {
      this.isShowEdit = true;
      row.u_pass = "";
      this.memberInfo = row;
    },

    handleDelete(index, row) {
      this.$confirm('此操作将永久删除当前信息, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let parem = {
            id:row.u_id
          }
          this.ajaxCommon.ajax({
                    url: 'ADMINuserdelete',
                    methods:'get',
                    data: parem,
                    success: (res) => {
                      console.log(res)
                      if(res.code == 200){
                        this.$message({
                            message: '删除成功',
                            type: 'success',
                            duration:'2000'
                          });
                          this.huoqu();
                      }else{
                        this.$message({
                            message: res.status,
                            type: 'error',
                            duration:'2000'
                          });

                      }
                     
                    }
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      // let parem = {
      //   u_id:row.u_id
      // }
      // this.ajaxCommon.ajax({
      //               url: 'ADMINuserdelete',
      //               methods:'get',
      //               data: parem,
      //               success: (res) => {
      //                 console.log(res)
      //                 if(res.code == 200){
      //                   this.$message({
      //                       message: '删除成功',
      //                       type: 'success',
      //                       duration:'2000'
      //                     });
      //                     this.huoqu();
      //                 }else{
      //                   this.$message({
      //                       message: res.status,
      //                       type: 'error',
      //                       duration:'2000'
      //                     });

      //                 }
                     
      //               }
      //           });
    },

    submit() {
      
      if(this.memberInfo.u_tel == ''){
                         this.$message({
                            message: '请输入手机号',
                            type: 'error',
                            duration:'2000'
                          });
                          return
           
      }else if(!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.memberInfo.u_tel))){
        this.$message({
                            message: '手机号格式不对',
                            type: 'error',
                            duration:'2000'
                          });
                          return

      }
      else if(this.memberInfo.u_account == ''){
        this.$message({
                            message: '请输入工号',
                            type: 'error',
                            duration:'2000'
                          });
                          return

      }else if(this.memberInfo.u_name == ''){
        this.$message({
                            message: '请输入姓名',
                            type: 'error',
                            duration:'2000'
                          });
                          return                         
      
      }else if(this.memberInfo.u_pass == ''){
        this.$message({
                            message: '请输入密码',
                            type: 'error',
                            duration:'2000'
                          });
                          return

      }else{
      this.ajaxCommon.ajax({
                    url: 'ADMINuserupdate',
                    method: 'post',
                    data: this.memberInfo,
                    success: (res) => {
                      console.log(res)
                      if(res.code == 200){
                        this.$message({
                            message: '修改成功',
                            type: 'success',
                            duration:'2000'
                          });
                          this.isShowEdit = false;
                          this.huoqu();
                      }else{
                        this.$message({
                            message: res.status,
                            type: 'error',
                            duration:'2000'
                          });

                      }
                     
                    }
                });
      }
    },
    onQuery() {
      console.log(this.queryData)
      let parem = this.queryData
      this.ajaxCommon.ajax({
          url: 'ADMINuserlist',
          methods:'get',
          data: parem,
          success: (res) => {
            console.log(res)
            this.listmid = res;
            this.memberList = res;
          }
      });
    },

    cancel(){
      this.isShowEdit = false;
    }
  }
};
</script>

<style lang="less" scoped>
main {
  width: 100%;

  .edit-dialog-title {
    color: #ffffff;
    padding-left: 30px;
    height: 36px;
    line-height: 36px;
    font-size: 14px;
    background: #00bdac;
  }

  .add-input {
    width: 260px;
  }

  .edit-form {
    width: 100%;
  }

  .footer {
    display: flex;
    justify-content: space-between;
    margin-top: 30px;
  }
}
</style>

<style lang="less">
main {
  .edit-dialog {
    .el-dialog__header {
      padding: 0;
    }

    .el-dialog__body {
      padding: 30px;
      height: 450px;
      overflow: auto;
    }
  }
}
</style>
